﻿<!--@jQuery-->
<div id="pivotGridContainer" style="height:280px; max-width:750px; margin:0 auto"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Disable the Widget:&nbsp;
    <div id="switchContainer" style="display:inline-block; vertical-align:middle"></div>
</div>
<!--/@jQuery-->
<!--@Knockout-->
<div style="height:280px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row'
        }, {
            dataField: 'city',
            width: 150,
            area: 'row',
            selector: function (data) {
                return data.city + ' (' + data.country + ')';
            }
        }, {
            dataField: 'date',
            dataType: 'date',
            area: 'column'
        }, {
            dataField: 'amount',
            summaryType: 'sum',
            format: 'currency',
            area: 'data'
        }]
    },
    fieldChooser: { enabled: false },
    disabled: disabled
}"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Disable the Widget:&nbsp;
    <div style="display:inline-block; vertical-align:middle" data-bind="dxSwitch: {
        onText: 'true',
        offText: 'false',
        value: disabled
    }"></div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="pivotGridController">
    <div style="height:280px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row'
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: false },
        bindingOptions: {
            disabled: 'disabled'
        }
    }"></div>
    <div style="height:40px; margin-top:5px; text-align:center">
        Disable the Widget:&nbsp;
        <div style="display:inline-block; vertical-align:middle" ng-model="disabled" dx-switch="{
            onText: 'true',
            offText: 'false'
        }"></div>
    </div>
</div>
<!--/@AngularJS-->